<template>
    <div class="breadcrumb">
        <ul v-if="data">
            <li v-for="(x, i) in data" :key="i">
                <router-link :to="x.url">{{x.title}}</router-link> <span>/</span>
            </li>            
        </ul>
    </div>
</template>
<script lang="ts">
import type { PropType } from 'vue'
import type { UrlInfo } from './type'
export default {
    props: {
        data: {
            type: Array as PropType<UrlInfo[]>,
            default: () => ([])
        }
    }
}

</script>
<style lang="scss" scoped>
.breadcrumb {
    padding: 0.5em;
    ul {
        li {
            display: inline-block;            
            a {
                text-decoration: none;
                color: #999;

                &:hover {
                    text-decoration:underline #888;
                }
            }
            span {
                color: #999;
                margin: 0 0.5em;
                font-weight: bold;
            }
        }
    }
}
</style>